<template>
    <el-header>
      <el-button
          plain
          @click="open2" class="custom-button">
        试卷设计
      </el-button>
    </el-header>
    <el-main>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="试卷名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="考场区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="一考场" value="shanghai"></el-option>
            <el-option label="二考场" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考试时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="线下笔试">
          <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="试卷组成">
          <el-checkbox-group v-model="form.type">
            <el-checkbox label="选择题题库1" name="type"></el-checkbox>
            <el-checkbox label="选择题图库2" name="type"></el-checkbox>
            <el-checkbox label="多选题题库1" name="type"></el-checkbox>
            <el-checkbox label="多选题题库2" name="type"></el-checkbox>
            <el-checkbox label="简答题题库1" name="type"></el-checkbox>
            <el-checkbox label="简答题题库2" name="type"></el-checkbox>
            <el-checkbox label="自定义" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊题型">
          <el-radio-group v-model="form.resource">
            <el-radio label="附加题题库1"></el-radio>
            <el-radio label="学生心理测试题库1"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="试卷备注">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
              plain
              @click="open1">
            创建试卷
          </el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form></el-main>
    <el-footer>
      <div style="margin-top: 30px;">
      <h2>自定义试卷</h2>
      <p>在这里，您可以上传您的自定义试卷文件，并将其保存或上传到服务器。</p>

      <el-upload
          class="upload-demo"
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :file-list="fileList"
          :auto-upload="false">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">不限文件格式，但不能超过800kb</div>
      </el-upload>
    </div>
      </el-footer>

</template>

<script>

export default {
  data() {
    return {
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      fileList: [
        {
          name: 'text.docx',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        },
        {
          name: 'text2.docx',
          url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      ]
    };
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log('remove file:', file, 'current file list:', fileList);
    },
    handlePreview(file) {
      console.log('preview file:', file);
    },
    open1() {
      this.$notify({
        title: '成功',
        message: '这是一条成功的提示消息',
        type: 'success'
      });
    },
    open2() {
      this.$notify({
        title: '提示',
        message: '请在下方表单内设计您的试卷',
        duration: 0
      });
    }
  }
};

</script>

<style>
h2 {
  color: #000000;
  font-size: 24px;
  font-family: Arial, sans-serif;
  font-weight: bold;
  text-decoration: underline;
}

p {
  margin-bottom: 10px;
}
.custom-button {
  font-size: 20px;
  color: #000000;
  /* 其他样式属性 */
}
</style>
